import React, { Component } from 'react'
import { NavBar, WingBlank, SearchBar, WhiteSpace } from 'antd-mobile';
import GoBack from '../../components/GoBack';
import { reqAllGoods, reqBanner, reqGroup, reqNew, reqSeckil } from '../../http/api';
import './Home.less'
import './components/AllGoods/AllGoods.less'
import NewShare from './components/BewShare/NewShare';
import Group from './components/Group/Group'
import Navimg from './components/NavImg/Navimg';
import Seckil from './components/seckil/Seckil'
import AllGoods from './components/AllGoods/AllGoods';
// 组件要用仓库，必须是一个容器型组件
import { connect } from 'react-redux'
// 引入仓库中的方法
import { actions, getAllGoods, getBanner, getGroup, getN, getSeckil, getShowList } from '../../store/modules/home';
import { bindActionCreators } from 'redux'
class Home extends Component {
    constructor() {
        super()
        // 初始化数据
        this.state = {
            // Bannerlist: [],
            // cateList: []
            newlist: [],
            grouplist: [],
            seckillist: [],
            allList: [],
            goods: [
                {
                    id: 1, title: "新鲜水果"
                }, {
                    id: 2, title: "特价水果"
                }, {
                    id: 3, title: "特价蔬菜"
                }, {
                    id: 4, title: "调味用品"
                },

            ],
            n: 0
        }


    }
    componentDidMount() {
        console.log(this.props);
        // 一进页面就触发仓库中的reqBannerAction请求
        let { home: { reqBannerAction, reqGroupAction, reqSeckilAction, reqAllGoodsAction } } = this.props
        // 调用方法
        reqBannerAction()
        // 调用万人团的方法
        reqGroupAction()
        // 调用秒杀活动的方法
        reqSeckilAction()
        // 调用allGoods方法 
        reqAllGoodsAction()

        // 滚动行为
        if (sessionStorage.getItem("homeScroll")) {
            document.documentElement.scrollTop = Number(sessionStorage.getItem("homeScroll"))
            document.body.scrollTop = Number(sessionStorage.getItem("homeScroll"))
        }
    }
    componentWillUnmount() {
        // 滚动行为
        sessionStorage.setItem("homeScroll", document.documentElement.scrollTop || document.body.scrollTop)
    }
    render() {
        //此时不是从state中取数据，而是从props中取--
        // 将changeN取出来，传给子组件
        let { banner, group, seckil, n, home: { changeN }, showList } = this.props
        console.log(showList);
        return (
            <div className="home">
                <NavBar
                    mode="dark"
                    icon={<GoBack {...this.props}></GoBack>}
                >首页</NavBar>
                <div className="nav_logo">
                    <SearchBar placeholder="搜索" maxLength={8} />
                    <WhiteSpace />
                </div>
                {/* 新人专享 */}
                <div className="new_share">
                    {
                        banner.length > 0 ? <NewShare newlist={banner}></NewShare> : null
                    }
                </div>

                <Navimg></Navimg>
                {/* 万人团 */}
                {
                    group.length > 0 ? <Group grouplist={group}></Group> : null
                }
                {/* 秒杀 */}
                {
                    seckil.length > 0 ? <Seckil seckillist={seckil}></Seckil> : null
                }

                {/* 首页全部商品 */}
                {/* 1..将n传递过去 */}
                <AllGoods {...this.props} n={n} changeN={(index) => changeN(index)} allList={showList}></AllGoods>
            </div>
        )
    }
}
const mapStateToProps = (state) => {
    return {
        // 取轮播图数据
        banner: getBanner(state),
        // 获取万人团的数据
        group: getGroup(state),
        // 获取秒杀的数据
        seckil: getSeckil(state),
        // 获取所有商品
        allGoods: getAllGoods(state),
        // 获取n
        n: getN(state),
        showList: getShowList(state)
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        // 将轮播图的actions和dispatch进行整合
        home: bindActionCreators(actions, dispatch)
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Home)
